import React, { useState } from "react";
import UserLayout from "./";
import { withRouter } from "next/router";
import { Button } from "antd";
import axios from "../../utils/axios";
import dynamic from "next/dynamic";
const UserInfo = dynamic(import("../../components/UserInfo"));

function UserDetail(props) {
  let [show, setShow] = useState(false);
  return (
    <UserLayout>
      <p>ID: {props.router.query.id}</p>
      <Button onClick={() => setShow(!show)}>显示/隐藏</Button>
      {show && <UserInfo user={props.user} />}
    </UserLayout>
  );
}
UserDetail.getInitialProps = async (ctx) => {
  let response = await axios({
    url: `/api/users/${ctx.query.id}`,
    method: "GET",
  });
  return { user: response.data.data };
};
export default withRouter(UserDetail);
